<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wjn
 * @LastEditTime: 2022-01-07 15:58:13
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" style="height: 95%"></div>
</template>

<script>
import {Pie} from '@antv/g2plot'
import { get } from '../../../utils/request'

export default {
    data() {
      return {
        dataArr:[]
      }
    },
    created() { //钩子函数

    },
    mounted() {
      this.initData()
    },
    methods:{
      initData() {
        get('/dashboard/queryDeviceOnlineNumber').then(res => {
          console.log(3333,res);
          this.dataArr = res.data
          this.initChart()
        })
      },
      initChart() {
        const pie = new Pie(this.$refs.left2_container, {
          appendPadding: 10,
          data:this.dataArr,
          angleField: 'value',
          colorField: 'type',
          radius: 0.9,
          interactions: [{ type: 'element-active' }],
          //legend:false
        })
        
        pie.render()
      }
    }
}
</script>

<style scoped>

</style>